import UHeader from '@/components/qualcomm/UHeader'
import { IconClose, IconMore } from '@douyinfe/semi-icons'
import {
  Form,
  Col,
  Row,
  Button,
  Space,
  Tabs,
  TabPane,
  RadioGroup,
  Table,
  Input,
  Select,
  Checkbox,
  Descriptions,
} from '@douyinfe/semi-ui'

const StyleDiv = styled.div`
  .semi-form-field-label-text,
  .semi-checkbox-addon,
  .semi-select-selection,
  .semi-radio-addon {
    font-size: 12px;
  }
`

const page = () => {
  const style = { width: '90%' }

  const [value, setValue] = useState(1)

  const columns = [
    {
      title: '1',
      dataIndex: 'name',
    },
    {
      title: '2',
      dataIndex: 'a',
    },
    {
      title: '3',
      dataIndex: 'b',
    },
    {
      title: '4',
      dataIndex: 'c',
    },
  ]
  const data = [
    {
      key: '1',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '2',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '3',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '4',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '5',
      name: '',
      a: '',
      b: '',
      c: '',
    },
    {
      key: '6',
      name: '',
      a: '',
      b: '',
      c: '',
    },
  ]

  return (
    <StyleDiv>
      <Tabs
        type="line"
        style={{ width: 'calc(100vw - 256px)' }}
        size="small"
        defaultActiveKey="8"
        lazyRender
        collapsible
      >
        <TabPane tab="Services" itemKey="1">
          <UHeader>
            <RadioGroup
              direction="vertical"
              defaultValue={0}
              options={[
                { label: 'Read Info', value: 0 },
                { label: 'Reset FRP | Erase Method', value: 1 },
                { label: 'Reset FRP | Write Method', value: 2 },
                { label: 'Format | Factory Reset - Safe', value: 3 },
                { label: 'Format | Factory Reset - Userdata', value: 4 },
                { label: 'Factory Reset | FRP - Safe', value: 5 },
                { label: 'Factory Reset | FRP - Liserdata', value: 6 },
                { label: 'Reset MI Account | No Relock', value: 7 },
                { label: 'Fix DL-Image Error', value: 8 },
              ]}
            ></RadioGroup>
            <div className="py-5">
              <Button theme="solid" size="large" type="primary">
                Do Selected
              </Button>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Flasher" itemKey="2">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6">
                <div className="flex-1">
                  <div className="py-2">
                    <Input
                      placeholder="Select Firmware"
                      addonAfter={
                        <Button>
                          <IconMore className="px-2" />
                        </Button>
                      }
                    ></Input>
                  </div>
                  <Table columns={columns} dataSource={data} pagination={false} bordered />
                </div>
                <div className="w-[250px] py-2 pl-4 flex">
                  <Space vertical className="flex-1" spacing={20}>
                    <Select placeholder="XML Qualcomm Flashing" style={{ width: '100%' }} showClear>
                      <Select.Option value={0}>AA</Select.Option>
                      <Select.Option value={1}>BBB</Select.Option>
                      <Select.Option value={2}>CCC</Select.Option>
                    </Select>
                    <Select placeholder="Select Image DDirectory" style={{ width: '100%' }} showClear>
                      <Select.Option value={0}>AA</Select.Option>
                      <Select.Option value={1}>BBB</Select.Option>
                      <Select.Option value={2}>CCC</Select.Option>
                    </Select>
                    <Space wrap>
                      <Checkbox defaultChecked>Skip Security Partitions</Checkbox>
                      <Checkbox>Reset FRP</Checkbox>
                      <Checkbox>Skip Patch.xml</Checkbox>
                    </Space>
                    <Button theme="solid" size="large" type="primary" style={{ width: '100%' }}>
                      FLASH
                    </Button>
                  </Space>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Backup Firmware" itemKey="3">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6">
                <div className="flex-1">
                  <Table columns={columns} dataSource={data} pagination={false} bordered />
                </div>
                <div className="w-[250px] pl-4 flex">
                  <Space vertical className="flex-1" spacing={20} align="start">
                    <Space wrap>
                      <Checkbox defaultChecked>Create Raw and Path.xmls</Checkbox>
                    </Space>

                    <Select placeholder="Full Firmware backup" style={{ width: '100%' }} showClear>
                      <Select.Option value={0}>AA</Select.Option>
                      <Select.Option value={1}>BBB</Select.Option>
                      <Select.Option value={2}>CCC</Select.Option>
                    </Select>

                    <Space wrap>
                      <Checkbox defaultChecked>Read Small Userdata</Checkbox>
                      <Checkbox>Read Full Userdata</Checkbox>
                      <Checkbox>Skip Userdata</Checkbox>
                    </Space>
                    <Button theme="solid" size="large" type="primary" style={{ width: '100%' }}>
                      FLASH
                    </Button>
                  </Space>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Partition Manager" itemKey="4">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6">
                <div className="flex-1">
                  <Table columns={columns} dataSource={data} pagination={false} bordered />
                </div>
                <div className="w-[250px] pl-4 flex">
                  <Space vertical className="flex-1" spacing={20} align="start">
                    <Select placeholder="Full Firmware backup" style={{ width: '100%' }} showClear>
                      <Select.Option value={0}>AA</Select.Option>
                      <Select.Option value={1}>BBB</Select.Option>
                      <Select.Option value={2}>CCC</Select.Option>
                    </Select>
                    <RadioGroup
                      defaultValue={0}
                      direction="vertical"
                      options={[
                        { label: 'List Paritions', value: 0 },
                        { label: 'Backup Selected', value: 1 },
                        { label: 'Write Selected', value: 2 },
                        { label: 'Wipe Selected', value: 3 },
                      ]}
                    ></RadioGroup>
                    <Button theme="solid" size="large" type="primary" style={{ width: '100%' }}>
                      Do Selected
                    </Button>
                  </Space>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="Security Manager" itemKey="5">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="flex py-6 flex-col">
                <RadioGroup
                  direction="vertical"
                  value={0}
                  options={[
                    { label: 'Backup Security', value: 0 },
                    { label: 'Restore Security', value: 1 },
                    { label: 'Wipe Security', value: 2 },
                  ]}
                ></RadioGroup>
                <div className="py-5">
                  <Button theme="solid" size="large" type="primary">
                    Do Selected
                  </Button>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="IMEI | QCN" itemKey="6">
          <UHeader>
            <div className="flex flex-col">
              <div>
                <Space spacing="loose">
                  <span>Control</span>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Method-1', value: 0 },
                      { label: 'Method-2', value: 1 },
                    ]}
                  ></RadioGroup>
                  <RadioGroup
                    defaultValue={0}
                    direction="horizontal"
                    options={[
                      { label: 'Select All', value: 0 },
                      { label: 'UnSelect All', value: 1 },
                    ]}
                  ></RadioGroup>
                </Space>
              </div>
              <div className="py-6 flex">
                <div>
                  <Descriptions align="left">
                    <Descriptions.Item itemKey="Methods">
                      <Select defaultValue={0} className="w-full">
                        <Select.Option value={0}>EFS Method</Select.Option>
                        <Select.Option value={1}>Enter 14 digit I...</Select.Option>
                        <Select.Option value={2}>0000000</Select.Option>
                      </Select>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="IMEI 1">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="IMEI 2">
                      <Input placeholder="Enter 14 digit I..." showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="ESN">
                      <Input placeholder="0000000000" showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="MEID">
                      <Input placeholder="000000000000000000" showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      <Input placeholder="Enter 15 IMEI" showClear></Input>
                    </Descriptions.Item>
                    <Descriptions.Item itemKey="">
                      Tip: IMEI Changing is illegal | Use this function to restore original IMEI.
                    </Descriptions.Item>
                  </Descriptions>
                </div>
                <div className="px-4">
                  <Space align="start" vertical>
                    <Checkbox defaultChecked>Reset EFS TWRP | RSA Method</Checkbox>
                    <Checkbox>Use Qcn with EFS Method | XIAOMI</Checkbox>
                    <Button theme="solid" type="primary" className="w-full">
                      Repair IMEI
                    </Button>
                    <Button theme="solid" type="primary" className="w-full">
                      Convert To Eng QCN
                    </Button>
                    <Button theme="solid" type="primary" className="w-full">
                      Repair ESN and MEID
                    </Button>
                    <Button theme="solid" type="primary" className="w-full">
                      QCN To Eng QCN
                    </Button>
                  </Space>
                </div>
                <div className="flex-1">
                  <Space align="start" vertical style={{ display: 'flex' }}>
                    <Select defaultValue={0} style={{ width: '200px' }}>
                      <Select.Option value={0}>Multi Sim Enabled</Select.Option>
                      <Select.Option value={1}>Enter 14 digit I...</Select.Option>
                      <Select.Option value={2}>0000000</Select.Option>
                    </Select>
                    <Select defaultValue={0} style={{ width: '200px' }}>
                      <Select.Option value={0}>00000000</Select.Option>
                      <Select.Option value={1}>Enter 14 digit I...</Select.Option>
                      <Select.Option value={2}>0000000</Select.Option>
                    </Select>
                    <RadioGroup
                      defaultValue={0}
                      direction="vertical"
                      options={[
                        { label: 'Read_QCN', value: 0 },
                        { label: 'Write_QCN', value: 1 },
                        { label: 'Read Diag Info', value: 2 },
                      ]}
                    ></RadioGroup>
                  </Space>
                </div>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="VivoSpecial" itemKey="7">
          <UHeader>
            <Tabs type="card" size="small" lazyRender defaultActiveKey="2">
              <TabPane tab="Fastboot Functions" itemKey="1">
                <div className="grid grid-cols-3 gap-3 py-4">
                  <Button theme="solid" type="primary">
                    Read Info
                  </Button>
                  <Button theme="solid" type="primary">
                    UnLock BootLoader
                  </Button>
                  <Button theme="solid" type="primary">
                    Safe Format
                  </Button>
                  <Button theme="solid" type="primary">
                    ReBoot to EDL
                  </Button>
                  <Button theme="solid" type="primary">
                    ReLock BootLoader
                  </Button>
                  <Button theme="solid" type="primary">
                    Remove Screen Locks
                  </Button>
                  <Button theme="solid" type="primary">
                    Reset FRP
                  </Button>
                  <Button theme="solid" type="primary">
                    Factory Reset + FRP
                  </Button>
                  <Button theme="solid" type="primary">
                    Remove Demo
                  </Button>
                </div>
              </TabPane>
              <TabPane tab="EDL Functions" itemKey="2">
                <div className="py-4 grid grid-cols-3 gap-3 text-[12px]">
                  <div className="grid grid-rows-1 gap-2">
                    <span>EDL - 9008 Port manual XML erase method - new SFC</span>
                    <Input
                      showClear
                      placeholder="Select XML Firmware"
                      addonAfter={
                        <Button>
                          <IconMore className="px-2" />
                        </Button>
                      }
                    ></Input>
                    <Input
                      placeholder="Reset FRP"
                      showClear
                      addonAfter={
                        <Button disabled>
                          <IconClose className="px-2" />
                        </Button>
                      }
                    ></Input>
                    <Button theme="solid" type="primary" className="w-full">
                      Do Selected
                    </Button>
                  </div>
                  <div className="grid grid-rows-1 gap-2">
                    <span>EDL - 9008 Port manual XML erase method - new SFC</span>
                    <Input
                      showClear
                      placeholder="Start Offset"
                      addonAfter={
                        <Button disabled>
                          <IconClose className="px-2" />
                        </Button>
                      }
                    ></Input>
                    <Input
                      placeholder="End Offset"
                      showClear
                      addonAfter={
                        <Button disabled>
                          <IconClose className="px-2" />
                        </Button>
                      }
                    ></Input>
                    <div className="w-full line-height-loose">
                      <p>Form Xml for manual Address</p>
                      <p>Start_sector = "Start Offset"</p>
                      <p>num_partition_sectars = "End Offset"</p>
                      <Button theme="solid" type="primary" className="w-full">
                        Manual Erase
                      </Button>
                    </div>
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </UHeader>
        </TabPane>
        <TabPane tab="MTP | Browser" itemKey="8">
          <UHeader>
            <div className="flex">
              <div className="flex flex-col">
                <RadioGroup
                  direction="vertical"
                  defaultValue={0}
                  options={[
                    { label: 'Read Info', value: 0 },
                    { label: 'Browser (YouTube)', value: 1 },
                    { label: 'Browser Server 1', value: 2 },
                  ]}
                ></RadioGroup>
                <div className="py-5">
                  <Button theme="solid" size="large" type="primary">
                    Do Selected
                  </Button>
                </div>
              </div>
              <div className="px-5">
                <Space spacing="tight" align="start" vertical wrap>
                  <Checkbox defaultChecked>Open Custom browser link</Checkbox>
                  <Select defaultValue={0} style={{ width: '200px' }}>
                    <Select.Option value={0}>Enter custom browser link</Select.Option>
                    <Select.Option value={1}>AA</Select.Option>
                    <Select.Option value={2}>BB</Select.Option>
                  </Select>
                </Space>
              </div>
            </div>
          </UHeader>
        </TabPane>
        <TabPane tab="ZTE SideLoad FRP" itemKey="9">
          <UHeader>
            <div className="text-[12px]">
              <Space spacing="tight" align="start" vertical wrap>
                Select Model
                <Select defaultValue={0} style={{ width: '200px' }}>
                  <Select.Option value={0}>Select Model</Select.Option>
                  <Select.Option value={1}>AA</Select.Option>
                  <Select.Option value={2}>BB</Select.Option>
                </Select>
                <div className="py-2">
                  <Button theme="solid" size="large" type="primary">
                    Do Selected
                  </Button>
                </div>
              </Space>
            </div>
          </UHeader>
        </TabPane>
      </Tabs>
    </StyleDiv>
  )
}

export default page
